@extends('wx.layout.act')

@section('wx.pheader')
  <div class="weui-form__text-area">
    <img src="{{stamp('/assets/images/0.png')}}" style="width:100%;"/>
  </div>
@stop

@section('wx.pbody')

  @if( !$topic->status)
    <div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">答题活动已圆满结束</h2>
        <div class="weui-form__desc">请关注我们的公众号留意抽奖信息！</div>
      </div>
      <div class="weui-form__control-area"></div>
      <div class="weui-form__opr-area">
        <a href="#" class="weui-btn weui-btn_default">返回</a>
      </div>
    </div>
  @else
  <div class="weui-panel weui-panel_access">
      <div class="weui-panel__hd"><strong class="weui-media-box__title">{{$topic->name}}</strong>
         （共 {{$topic->questions->count()}} 题，还剩 <span class="red">{{$qNumber}}</span> 题）
        </div>
      <div class="weui-panel__bd">
          <div role="option" class="weui-media-box weui-media-box_text">
              <p class="weui-media-box__desc">{{$topic->desc}}</p>
          </div>
      </div>
      
  </div>
  <form id="wx" autocomplete="off">
    <div class="weui-panel weui-panel_access">
    
        {{ csrf_field() }}
        <input type="hidden" name="topic" value="{{$topic->id}}">
        <input type="hidden" name="uuid" value="{{$topic->token}}">
        @foreach($questions as $i=>$question)
          <div class="weui-panel__hd">
            <h3>{{ $question->title}} {{$question->single==0?'(多选)':''}}</h3>
            <input type="hidden" name="question{{$i+1}}" value="{{$question->id}}">
          </div>
          <div class="weui-panel__bd weui-cells_checkbox" >
              @foreach($question->options as $opt)
              <label class="weui-cell weui-cell_active weui-check__label" for="opt{{$opt->id}}" >
                  <div class="weui-cell__hd">
                      <input type="{{$question->single==1?'radio':'checkbox'}}" class="weui-check answer" name="answer" id="opt{{$opt->id}}"
                      data-opt_id="{{$opt->id}}" data-question_id="{{$question->id}}" value="{{$opt->id}}">
                      <span class="weui-icon-checked"></span>
                  </div>
                  <div class="weui-cell__bd">
                      <p>{{$opt->content}}</p>
                  </div>

              </label>
              @endforeach
          </div>
        @endforeach
        <div class="weui-panel__ft">
          <div class="weui-media-box weui-media-box_text">
              {{$questions->links('pagination::weixin')}}
          </div>
        </div>
    </div>
    
    <div class="weui-panel weui-panel_access">
      <div class="weui-cells__group weui-cells__group_form">
      <div class="weui-panel__hd">答题人信息</div>
      <div class="weui-panel__bd" >
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
              <div class="weui-cell__bd">
                  <input name="name" type="text" class="weui-input" placeholder="答题人姓名">
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
              <div class="weui-cell__bd">
                  <input name="mobile" class="weui-input" placeholder="请输入手机号码" type="number" pattern="[0-9]*">
              </div>
            </div>
            <div class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
              <div class="weui-cell__bd">
                  <input class="weui-input" type="number" pattern="[0-9]*" name="smscode" placeholder="输入验证码" maxlength="6">
              </div>
            </div>
            <div class="weui-cell weui-cell_active weui-cell_vcode">
              <div class="weui-cell__bd"></div>
              <div class="weui-cell__ft">
                <button class="weui-btn weui-btn_default weui-vcode-btn sms">获取验证码</button>
              </div>
            </div>
      </div>
      <div class="weui-panel__ft" style="padding-top:40px;">
        <div class="weui-form__opr-area">
          <button class="weui-btn weui-btn_primary" id="btnAnwser">提交答案</button>
        </div>
      </div>
    </div>
  </form>
  @endif
@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $("#wx").validate({

          onfocusout: false,
          onkeyup: false,

          rules: {                 
              answer:{required:true},
              name:{required:true, isChinese: true, minlength: 2},
              mobile:{required:true, isMobile: true},
              smscode: {required: true, digits: true, maxlength: 6, minlength: 6}
          },
          messages: {        
              answer:{required:"请选择选项"},  
              name: {required: "请填写姓名", minlength: "名字不合法"},
              mobile: {required: "请填写手机号码"},
              smscode: {required: "请填写验证码", maxlength: "验证码格式不正确", minlength: "验证码格式不正确", digits: "验证码格式不正确"}
          },

          showErrors: function (errorMap, errorList) {
              $.each(errorList, function (i, v) {
                  layer.msg(v.message, {shift: -1, time: 2000});
                  return false;
              });
          },

          submitHandler: function (form) {

              var answer = {};
              $(".answer").each(function(i){
                if(this.checked){
                  answer[i] = $(this).val();
                }
              });

              $.post('{{route('wx.act.answer')}}', {
                  '_token': $("input[name='_token']").attr('value'),
                  'topic_id': $("input[name='topic']").val(),
                  'uuid': $("input[name='uuid']").val(),
                  'name': $("input[name='name']").val(),
                  'mobile': $("input[name='mobile']").val(),
                  'smscode': $("input[name='smscode']").val(),
                  'question_id':$("input[name='answer']").data('question_id'),
                  'answer': answer,
                  'is_submit': true
              }, function (data) {
                  console.log(data);
                  layer.msg(data.message, {shift: -1}, function () {
                      if (data.status === true && data.url != null) {
                          $(window).attr('location', data.url);
                      }
                  });

              }, 'json').error(function (data) {
                  layer.msg(data.responseJSON.message);
              });
          }

      });


      $('.sms').on('click', function () {

          var uri = '{{route('wx.csms')}}';

          $.post(uri, {
              '_token': $("input[name='_token']").attr('value'),
              'mobile': $("input[name='mobile']").val(),
              'is_submit': true
          }, function (data) {
              layer.msg(data.message, {time: 1000, shift: -1}, function () {
                  if (data.status === true && data.url != null) {
                      $(window).attr('location', data.url);
                  }
              });

          }, 'json').error(function (data) {
              layer.msg(data.responseJSON.message);
          });

          var count = 60;
          const countDown = setInterval(() => {

              if (count === 0) {
                  $(this).text('获取验证码').removeAttr('disabled');
                  $(this).removeClass("grey");
                  clearInterval(countDown);
              } else {
                  $(this).attr('disabled', true);
                  $(this).addClass("grey");
                  $(this).text(count + '秒后重新发送');
              }
              count--;
          }, 1000);

      });

    });
  </script>
@stop